export const sector = {
    GreenSectorLeftTop: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="GreenSectorLeftTop" cx="100%" cy="100%" r="100%" fx="100%" fy="100%">
                    <stop offset="0%" stop-color="#0f8d14" />
                    <stop offset="40%" stop-color="#37e23e" />
                    <stop offset="100%" stop-color="#0f8d14" />
                </radialGradient>
            </defs>
        
            <path d="M ${width},${height} L 0,${height} A ${width},${height} 0 0 1 ${width},0 Z" fill="url(#GreenSectorLeftTop)" />`
    },
    GreenSectorLeftBottom: ({width, height}) => {
        return `
        <defs>
            <radialGradient id="GreenSectorLeftBottom" cx="100%" cy="0%" r="100%" fx="100%" fy="0%">
            <stop offset="0%" stop-color="#0f8d14" />
            <stop offset="40%" stop-color="#37e23e" />
            <stop offset="100%" stop-color="#0f8d14" />
            </radialGradient>
        </defs>
        
        <path d="M ${width},0 L ${width},${height} A ${width},${height} 0 0 1 0,0 Z" 
                fill="url(#GreenSectorLeftBottom)" 
        />` 
    },
    GreenSectorRightTop: ({width, height}) => {
        return `
        <defs>
            <radialGradient id="GreenSectorRightTop" cx="0%" cy="100%" r="100%" fx="0%" fy="100%">
            <stop offset="0%" stop-color="#0f8d14" />
            <stop offset="40%" stop-color="#37e23e" />
            <stop offset="100%" stop-color="#0f8d14" />
            </radialGradient>
        </defs>
        
        <path d="M 0,${height} L 0,0 A ${width},${height} 0 0 1 ${width},${height} Z" 
            fill="url(#GreenSectorRightTop)" 
        />
        `
    },
    GreenSectorRightBottom: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="GreenSectorRightBottom" cx="0%" cy="0%" r="100%" fx="0%" fy="0%">
                <stop offset="0%" stop-color="#0f8d14" />
                <stop offset="40%" stop-color="#37e23e" />
                <stop offset="100%" stop-color="#0f8d14" />
                </radialGradient>
            </defs>
            
            <!-- 1/4圆扇形路径 (0°到90°) -->
            <path d="M 0,0 L ${width},0 A ${width},${height} 0 0 1 0,${height} Z" 
                    fill="url(#GreenSectorRightBottom)" 
                />

            `
    },
    RedSectorLeftTop: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="RedSectorLeftTop" cx="100%" cy="100%" r="100%" fx="100%" fy="100%">
                <stop offset="0%" stop-color="#8d0f0f" />
                <stop offset="40%" stop-color="#e23737" />
                <stop offset="100%" stop-color="#8d0f0f" />



                </radialGradient>
            </defs>
            
            <path d="M ${width},${height} L 0,${height} A ${width},${height} 0 0 1 ${width},0 Z" 
                    fill="url(#RedSectorLeftTop)" 
                />
            `
    },
    RedSectorLeftBottom: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="RedSectorLeftBottom" cx="100%" cy="0%" r="100%" fx="100%" fy="0%">
            <stop offset="0%" stop-color="#8d0f0f" />
            <stop offset="40%" stop-color="#e23737" />
            <stop offset="100%" stop-color="#8d0f0f" />
            </radialGradient>
        </defs>
        
        <path d="M ${width},0 L ${width},${height} A ${width},${height} 0 0 1 0,0 Z" 
                fill="url(#RedSectorLeftBottom)" 
            />

        `
    },
    RedSectorRightTop: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="RedSectorRightTop" cx="0%" cy="100%" r="100%" fx="0%" fy="100%">
      <stop offset="0%" stop-color="#8d0f0f" />
	<stop offset="40%" stop-color="#e23737" />
      <stop offset="100%" stop-color="#8d0f0f" />
    </radialGradient>
  </defs>
  
  <path d="M 0,${height} L 0,0 A ${width},${height} 0 0 1 ${width},${height} Z" 
        fill="url(#RedSectorRightTop)" 
      />

        `
    },
    RedSectorRightBottom: ({width, height}) => {
        return `
            <defs>
    <radialGradient id="RedSectorRightBottom" cx="0%" cy="0%" r="100%" fx="0%" fy="0%">
      <stop offset="0%" stop-color="#8d0f0f" />
	<stop offset="40%" stop-color="#e23737" />
      <stop offset="100%" stop-color="#8d0f0f" />
    </radialGradient>
  </defs>
  
  <!-- 1/4圆扇形路径 (0°到90°) -->
  <path d="M 0,0 L ${width},0 A ${width},${height} 0 0 1 0,${height} Z" 
        fill="url(#RedSectorRightBottom)" 
      />
            `
    },
    OrangeSectorLeftTop: ({width, height}) => {
        return `

  <defs>
    <radialGradient id="OrangeSectorLeftTop" cx="100%" cy="100%" r="100%" fx="100%" fy="100%">
      <stop offset="0%" stop-color="#8d5a0f" />
	<stop offset="40%" stop-color="#e2a337" />
      <stop offset="100%" stop-color="#8d5a0f" />
    </radialGradient>
  </defs>
  
  <path d="M ${width},${height} L 0,${height} A ${width},${height} 0 0 1 ${width},0 Z" 
        fill="url(#OrangeSectorLeftTop)" 
      />
            `
    },
    OrangeSectorLeftBottom: ({width, height}) => {
        return `

            <defs>
                <radialGradient id="OrangeSectorLeftBottom" cx="100%" cy="0%" r="100%" fx="100%" fy="0%">
                    <stop offset="0%" stop-color="#8d5a0f" />
                    <stop offset="40%" stop-color="#e2a337" />
                    <stop offset="100%" stop-color="#8d5a0f" />
                </radialGradient>
            </defs>
            
            <path d="M ${width},0 L ${width},${height} A ${width},${height} 0 0 1 0,0 Z" 
                fill="url(#OrangeSectorLeftBottom)" 
            />

        `
    },
    OrangeSectorRightTop: ({width, height}) => {
        return `

            <defs>
                <radialGradient id="OrangeSectorRightTop" cx="0%" cy="100%" r="100%" fx="0%" fy="100%">
                <stop offset="0%" stop-color="#8d5a0f" />
                <stop offset="40%" stop-color="#e2a337" />
                <stop offset="100%" stop-color="#8d5a0f" />
                </radialGradient>
            </defs>
            
            <path d="M 0,${height} L 0,0 A ${width},${height} 0 0 1 ${width},${height} Z" 
                    fill="url(#OrangeSectorRightTop)" 
                />
        `
    },
    OrangeSectorRightBottom: ({width, height}) => {
        return `

  <defs>
    <radialGradient id="OrangeSectorRightBottom" cx="0%" cy="0%" r="100%" fx="0%" fy="0%">
      <stop offset="0%" stop-color="#8d5a0f" />
	<stop offset="40%" stop-color="#e2a337" />
      <stop offset="100%" stop-color="#8d5a0f" />
    </radialGradient>
  </defs>
  
  <path d="M 0,0 L ${width},0 A ${width},${height} 0 0 1 0,${height} Z" 
        fill="url(#OrangeSectorRightBottom)" 
      />
        ` 
    },
    YellowSectorLeftTop: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="YellowSectorLeftTop" cx="100%" cy="100%" r="100%" fx="100%" fy="100%">
                    <stop offset="0%" stop-color="#8d8d0f" />
                    <stop offset="40%" stop-color="#e2e237" />
                    <stop offset="100%" stop-color="#8d8d0f" />
                </radialGradient>
            </defs>
            
            <path d="M ${width},${height} L 0,${height} A ${width},${height} 0 0 1 ${width},0 Z" 
                fill="url(#YellowSectorLeftTop)" 
            />
        `
    },
    YellowSectorLeftBottom: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="YellowSectorLeftBottom" cx="100%" cy="0%" r="100%" fx="100%" fy="0%">
                    <stop offset="0%" stop-color="#8d8d0f" />
                    <stop offset="40%" stop-color="#e2e237" />
                    <stop offset="100%" stop-color="#8d8d0f" />
                </radialGradient>
            </defs>
            
            <path d="M ${width},0 L ${width},${height} A ${width},${height} 0 0 1 0,0 Z" 
                fill="url(#YellowSectorLeftBottom)" 
            />
        `
    },
    YellowSectorRightTop: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="YellowSectorRightTop" cx="0%" cy="100%" r="100%" fx="0%" fy="100%">
                    <stop offset="0%" stop-color="#8d8d0f" />
                    <stop offset="40%" stop-color="#e2e237" />
                    <stop offset="100%" stop-color="#8d8d0f" />
                </radialGradient>
            </defs>
            
            <path d="M 0,${height} L 0,0 A ${width},${height} 0 0 1 ${width},${height} Z" 
                fill="url(#YellowSectorRightTop)" 
            />
        `
    },
    YellowSectorRightBottom: ({width, height}) => {
        return `
            <defs>
                <radialGradient id="YellowSectorRightBottom" cx="0%" cy="0%" r="100%" fx="0%" fy="0%">
                    <stop offset="0%" stop-color="#8d8d0f" />
                    <stop offset="40%" stop-color="#e2e237" />
                    <stop offset="100%" stop-color="#8d8d0f" />
                </radialGradient>
            </defs>
            
            <path d="M 0,0 L ${width},0 A ${width},${height} 0 0 1 0,${height} Z" 
                fill="url(#YellowSectorRightBottom)" 
            />
        `
    }
}
